<template>
	<view class="personalData">
		<!-- 个人资料 -->
		<form class="personalDataForm" catchsubmit="formSubmit" catchreset="formReset">
			
			<!-- 头像 -->
			<view class="myIcon">
					<text>头像</text>
						<view class="myIcon">
							<!-- 头像渲染 -->
							<image :src="userInfo.avatarUrl" mode="heightFix" style="height: 150rpx;"></image>
							<text class="getMyIcon" @click="getHeadphoto">从微信获取您的最新头像</text>
						</view>
			</view>	
			
			<!-- 性别 -->
			<view class="mySex">
					<text>性别</text>
					<radio-group class="sexRadio" @change="sexChange">
						<label v-for="(item, index) in sex" :key="item.value" style="margin-right: 50rpx;display: inline-block;">
					        <view>
					            <radio :value="item.value" :checked="index === this.userInfo.sex - 1" />
								{{item.label}}
					        </view>
					    </label>
					</radio-group>
			</view>
			
			<!-- 头衔密码,已砍 -->
		<!-- <view class="mypsd">
				<text>头衔密码</text>
				<view class="psdBox">
					<view class="psdBoxTop">
						<text>******</text>
						<text class="psdCopy" @click="psdCopy">复制</text>
					</view>
					<view class="psdBoxBottom">
						<text>复制上述密码发送到本店群中，即可获得头衔</text>
					</view>
				</view>
			</view> -->
			
			<!-- 群内昵称 -->
			<view class="myNickname">
					<text>群内昵称</text>
					<input v-model="userInfo.nickName">
			</view>
			
			<!-- 所在群 -->
			<view class="myGroup">
					<text>所在的群</text>
					<input v-model="userInfo.groupNumber">
			</view>

			
			<!-- 头衔 -->
			<view class="newCall">
				<text>小白称呼</text>
				<view class="userTitle">
			  		<picker @change="bindPickerChange" :value="index" :range="titleNameList">
						<!-- 组件语法是通过数组拿到,如果不想报红,只能将其存在一个数组中 -->
			  			<view>{{userTitle[index-1].titleName}}</view>
			  		</picker>
				</view>
			</view>
			
			<!-- 保存Btn -->
			<button class="personalDataSaveBtn" @click="savePersonalData">保存</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户数据
				userInfo:[],
				
				//性别radio
				sex: [{
			            label: "男",
				        value: 0,
				        checked: true
					}, 
					{
				        label: "女",
						value: 1
				    }],
					
				sexChecked:0,
				
				// 头衔选项
				userTitle: [],
				titleNameList: [],
				index: 1,
			}
		},
		methods: {
			
			// 获取最新微信头像
			getHeadphoto(){
				uni.getUserProfile({
					desc: 'weiXin', 
					success: (res) => {
						// console.log('获取最新微信头像',res.userInfo.avatarUrl);
						this.userInfo.avatarUrl = res.userInfo.avatarUrl
						console.log('我的头像',this.userInfo.avatarUrl);
					}
				})
			},
			
			// 更改性别
			sexChange(e){
				this.sexChecked = Number(e.detail.value) + 1
				//1：女生；2：男生
				console.log('性别状态码',this.sexChecked);
			},
			
			// 更改头衔
			bindPickerChange: function(e) {
			    // console.log('picker发送选择改变，携带值为', e.detail.value)
	            this.index = Number(e.detail.value)+1
				console.log('头衔',this.index);
			},
				
			// 密码复制
			// psdCopy(){
			// 	console.log('psdCopy')
			// },
			
			// 获取所有头衔
			getUserTitle(){
				console.log('post data',this.userInfo.nickName,this.sexChecked,this.index+1);
				uni.request({
					url:"http://124.220.177.66:8082/juben/getUserTile",
					success: (res) => {
						this.userTitle = res.data.data
						// console.log('头衔',this.userTitle);
						// 遍历userTitle数组,获取其中每个对象的titleName值,push进一个新的数组用于range
						
						for(let i=0 ;i<this.userTitle.length;i++){
							this.titleNameList.push(this.userTitle[i].titleName)
						}
						// console.log('渲染头衔列表',this.titleName);
					}
				})
			},
			
			// 保存我的资料数据
			savePersonalData(){
				// 接口请求
				uni.request({
					url:"http://124.220.177.66:8082/juben/handleUserInfo",
					method:"POST",
					data:{
						//从登录路由onLoad函数拿到openId,目前是模拟数据
							"nickName": this.userInfo.nickName, //昵称
							"sex": this.sexChecked, //性别 1,2
							"titleNum": this.index, //头衔ID 1-4
							"openID": "wx999" //openID
					},
					success:(res)=> {
						console.log(res);
					}
				})
				
				//页面返回上一级
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.userInfo = Math.random()
				uni.navigateBack();
				
			},
			
			
		},
		onLoad(option) {
			this.userInfo =	JSON.parse(option.item)
			console.log('用户信息回显',this.userInfo);
		},
		created() {
			this.getUserTitle()
		}
	}
</script>

<style lang="less">
	// 底色
	@bColor:#0D141F;
	// 主色
	@mColor:#623685;
	// 小号字体
	@font-size:25rpx;

	.formView{
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		// margin: 25rpx 15rpx;
		// text{
		// 	margin-right: 25rpx;
		// }
		input{
			.formInput
		}
	}
	
	.formInput{
		border: 1rpx solid @mColor;
		border-radius: 10rpx;
		flex-basis:500rpx
	}
	
	// =========================================================
		page{
			background-color: @bColor;
		}

		.personalData{
			padding:100rpx 25rpx;
			color: #fff;
			.personalDataForm{
				.myIcon{
					.formView;
						.getMyIcon{
							font-size: @font-size;
							color: @mColor;
						};
					flex-basis:500rpx;

					margin-bottom: 100rpx
				}
				.mySex{
					.formView;
					.sexRadio{
						flex-basis:500rpx
					}
				}
				.mypsd{
					.formView;
					.psdBox{
						.psdBoxTop{
							.psdCopy{
								margin-left: 50rpx;
								color: @mColor;
							};
							margin-bottom: 15rpx;
						}
						.psdBoxBottom{
							font-size: @font-size;
						};
						flex-basis:500rpx
					}
				}
				
				.myNickname{
					.formView;
					height: 120rpx;
				}
				
				.myGroup{
					.formView;
					height: 120rpx;
				}
				
				.newCall{
					.formView;
					.userTitle{
						flex-basis:500rpx;
						color: @mColor;
					};
					height: 120rpx;
				}
				
				.personalDataSaveBtn{
					background-color: @mColor;
				}
			}
		}
</style>